<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-06-03 17:55:36
 * @LastEditTime: 2024-06-04 11:11:58
 * @FilePath: \vue-admin-template\src\views\jsItem\ImgPreview\index.vue
-->
<template>
  <div class="app-container">
    <!-- el-image-viewer -->
    <div class="imgItem">
      el-image-viewer：
      <el-button type="primary" @click="elView">showImg</el-button>
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeviewer"
        :url-list="[showUrl]"
      ></el-image-viewer>
    </div>

    <el-divider></el-divider>

    <!-- Viewer.js -->
    <div class="imgItem">
      Viewer.js：
      <viewer>
        <img 
          v-for="(decImg, index) in descImgs" 
          :key="index" 
          :src="decImg" 
          style="width: 200px;height: 200px"
        >
      </viewer>
    </div>
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'ImgPreview',
  components: {
    ElImageViewer,
  },
  data() {
    return {
      showUrl: '',
      showViewer: false,
      descImgs: [ 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  methods: {
    elView() {
      this.showUrl = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      this.showViewer = true
    },
    closeviewer() {
      this.showViewer = false
    },
  }
}
</script>

<style lang="scss" scoped>
.imgItem{
  margin-bottom: 20px;
}
</style>